<template>
	<scroll-view scroll-y="true" class="container" :class="themeStyle" v-if="addonIsExit.memberregister">
		<view class="header-wrap" :class="themeStyle">
			<view class="logo-box">
				<!-- <image src="../../../static/logo.png" mode="aspectFit"></image> -->
				<image :src="$util.img(infos.logo)" mode="aspectFit"></image>
				<text>注册</text>
			</view>
			<view class="to-login">
				<text>已有账号，立即</text><text class="login-text" @click="toLogin">登录</text>
			</view>
		</view>
		<view class="body-wrap">
			<view class="form-wrap reg-mar-btm">
				<view class="input-wrap margin-top" v-show="registerMode == 'account'" style="margin-top: 0;
">
					<!-- <text class="iconfont iconyonghu"></text> -->
					<view class="content"><input type="text" placeholder="请输入用户名" placeholder-class="input-placeholder" class="input"
						 v-model="formData.account" /></view>
				</view>
				
				<view class="input-wrap">
					<!-- <text class="iconfont iconmima"></text> -->
					<view class="content"><input type="password" placeholder="请输入密码" placeholder-class="input-placeholder" class="input"
						 v-model="formData.password" /></view>
				</view>
				<view class="input-wrap">
				
					<view class="content"><input type="password" placeholder="请确认密码" placeholder-class="input-placeholder" class="input"
						 v-model="formData.rePassword" /></view>
				</view>
	
				<view class="input-wrap">
					<view class="content">
						<input type="text" placeholder="请输入验证码" placeholder-class="input-placeholder" class="input" v-model="formData.vercode" />
						<image :src="captcha.img" mode="" class="captcha" @click="getCaptcha"></image>
					</view>
				</view>
			</view>
	
			<button type="default" @click="register" class="login-btn">注册</button>
			<view class="regisiter-agreement">
				点击注册即代表您已同意
				<text class="ns-text-color ns-font-size-sm" @click="openPopup">《注册协议》</text>
			</view>
		</view>

		<view @touchmove.stop>
			<uni-popup ref="registerPopup" type="center" class="wap-floating">
				<view class="conten-box">
					<view class="title ns-text-color">{{ regisiterAgreement.title }}</view>
					<view class="con">
						<rich-text :nodes="regisiterAgreement.content"></rich-text>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- <uni-popup ref="phone_Popup" type="center" class="phone-floating">
			<view class="phone-box">
				<image :src="captcha.img" class="phone-img" mode="aspectFit" @click="GetimgCode()"></image>
				<view class="phonecode-box">
					<input type="text" v-model="phone_test" placeholder="请输入验证码" />
					<button type="default" class="test-btn" @click="sendMobileCode()">获取验证码</button>
				</view>
			</view>
		</uni-popup> -->
	</scroll-view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import validate from 'common/js/validate.js';
	import auth from 'common/js/auth.js';  //1

	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				allowRegister: true, // 是否允许注册
				registerMode: 'account',
				formData: {
					mobile: '',
					account: '', //手机号
					password: '', //密码
					phonecode: '', //验证码
					tuijiancode: '', //推广码
					key: '',
					rePassword: '',
					vercode: '',
					member_type:0,
				},
				tuijiancode_option: false,
				captcha: {
					img: '',
					id: ''
				},
				dynacodeData: {
					seconds: 120,
					timer: null,
					codeText: '获取动态码',
					isSend: false
				},
				phone_test: '', //获取验证码时的信息
				regisiterAgreement: {
					// 注册协议
					title: '',
					content: ''
				},
				isSub: false,
				back: '', // 返回页
				// logo图
				infos: {},
			};
		},
		mixins: [auth],//2
		onLoad(option) {
			if (option.back) this.back = option.back;
			let url = '';
			if (option.back) {
				url = decodeURIComponent(option.back);
				if(option.redirectMode){
					this.redirect = option.redirectMode;
				}
				Object.keys(option).forEach(function(key) {
					if (key != 'back') {
						if (url.indexOf('?') != -1) {
							url += '&' + key + '=' + option[key];
						} else {
							url += '?' + key + '=' + option[key];
						}
					}
				});
				this.back = url;
			}
			if (option.invite_code) {
				this.formData.tuijiancode = option.invite_code;
				this.tuijiancode_option = true
			}
			if (uni.getStorageSync('authInfo')) {
				let data = uni.getStorageSync('authInfo');
				if (data.authInfo) this.authInfo = data.authInfo;
				if (data.userInfo) this.userInfo = data.userInfo;
			}
		},
		computed: {
			// 使用对象展开运算符将此对象混入到外部对象中
			themeStyle() {
				return 'theme-' + this.$store.state.themeStyle
			},
			addonIsExit() {
				return this.$store.state.addonIsExit
			}
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			if (!this.addonIsExit.memberregister) {
				this.$util.showToast({
					title: '注册插件未安装',
					mask: true,
					duration: 2000
				})
				setTimeout(() => {
					this.$util.redirectTo('/pages/index/index/index', {}, 'redirectTo')
				}, 2000);
				return;
			}

			// #ifdef MP
			this.getCode();
			// #endif
			this.getRegisiterAggrement();
			this.getRegisterConfig();
			this.getUserInfo();//3
			// 获取网站信息
			this.getInfo()
			this.getCaptcha(); //获取图形验证码
		},
		methods: {

			getInfo() {
				// 获取网站信息
				this.$api.sendRequest({
					url: '/api/website/info',
					success: res => {
						if (res.code == 0) {
							this.infos = res.data;

							// console.log('获取网站信息1' + this.infos.longitude);
							// console.log('获取网站信息2' + this.infos.latitude);
						}
					}
				});
			},

			/**
			 * 切换注册方式
			 */
			switchRegisterMode() {
				if (this.registerMode == 'mobile') {
					if (this.registerConfig.type.indexOf('plain') != -1) this.registerMode = 'account';
				} else if (this.registerMode == 'account') {
					if (this.registerConfig.type.indexOf('mobile') != -1) this.registerMode = 'mobile';
				}
			},
			/**
			 * 展示注册协议
			 */
			openPopup() {
				if (this.regisiterAgreement.content != '') {
					this.$refs.registerPopup.open();
				}
			},
			/**
			 * 获取注册协议
			 */
			getRegisiterAggrement() {
				this.$api.sendRequest({
					url: '/api/register/aggrement',
					success: res => {
						if (res.code >= 0) {
							this.regisiterAgreement = res.data;
						}
					}
				});
			},
			/**
			 * 获取注册配置
			 */
			getRegisterConfig() {
				this.$api.sendRequest({
					url: '/api/register/config',
					success: res => {
						if (res.code >= 0) {
							this.registerConfig = res.data.value;
							if (this.registerConfig.is_enable != 1) {
								this.$util.showToast({
									title: '平台未启用注册!',
									success: () => {
										setTimeout(() => {
											this.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch');
										}, 1500);
									}
								});
							}
						}
					}
				});
			},
			/**
			 * 获取验证码
			 */
			getCaptcha() {
				this.$api.sendRequest({
					url: '/api/captcha/captcha',
					data: {
						captcha_id: this.captcha.id
					},
					success: res => {
						if (res.code >= 0) {
							this.captcha = res.data;
							this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
						}
					}
				});
			},
			/**
			 * 注册
			 */

			register() {
				let {
					account,
					password,
					rePassword,
					vercode
				} = this.formData;
				if (!account) {
					uni.showToast({
						icon: 'none',
						title: '请输入用户名'
					})
					return false;
				}
				if (!password) {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					})
					return false;
				}
				if (password.length<6) {
					uni.showToast({
						icon: 'none',
						title: '密码最小为6位'
					})
					return false;
				}
				if (!(rePassword)) {
					uni.showToast({
						icon: 'none',
						title: '请输入确认密码'
					})
					return false;
				}
				
				if (password !== rePassword) {
					uni.showToast({
						icon: 'none',
						title: '两次输入的密码不一致'
					})
					return false;
				}
				if (!(vercode)) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false;
				}
				if (password !== rePassword) {
					uni.showToast({
						icon: 'none',
						title: '两次输入的密码不一致'
					})
					return false;
				}
				var data = {
					username: this.formData.account.trim(),
					password: this.formData.password,
				};
				if (this.captcha.id != '') {
					data.captcha_id = this.captcha.id;
					data.captcha_code = this.formData.vercode;
				}
				if (Object.keys(this.authInfo).length) {
					data[this.authInfo.auth_tag] = this.authInfo.auth_openid;
				}
				if (this.userInfo.avatarUrl != '') data.headimg = this.userInfo.avatarUrl;
				if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member');
				this.$api.sendRequest({
					url: '/api/register/username',
					
					data: {
						member_type: this.formData.member_type,
						username: this.formData.account,
						password: this.formData.password,
						// code: this.formData.tuijiancode,
						captcha_id: this.captcha.id,
						captcha_code:this.formData.vercode
					},
					// data,
					success: res => {
						if (res.code >= 0) {
							uni.setStorage({
								key: 'token',
								data: res.data.token,
								success: () => {
									uni.removeStorageSync('loginLock');
									uni.removeStorageSync('unbound');
									uni.removeStorageSync('authInfo');
									if (this.back != '') {
										uni.setStorageSync('is_new',true);
										this.$util.redirectTo(this.back, {}, 'reLaunch');
									} else {
										uni.setStorageSync('is_new',true);
										this.$util.redirectTo('/pages/member/index/index', {},'reLaunch');
									}
								}
							});
						} else {
							this.isSub = false;
							this.getCaptcha();
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						this.isSub = false;
						this.getCaptcha();
					}
				});
			},
			verify(data) {
				let rule = [{
							name: 'password',
							checkType: 'required',
							errorMsg: '请输入登录密码'
						},
						{
							name: 'password',
							checkType: 'required',
							errorMsg: '请输入密码'
						}
					],
					regConfig = this.registerConfig;
				// console.log(this.registerConfig)
				// 密码长度
				if (regConfig.pwd_len > 0) {
					rule.push({
						name: 'password',
						checkType: 'lengthMin',
						checkRule: regConfig.pwd_len,
						errorMsg: '密码长度不能小于' + regConfig.pwd_len + '位'
					});
				}
				// 密码设定要求
				if (regConfig.pwd_complexity != '') {
					let passwordErrorMsg = '密码需包含',
						reg = '';
					if (regConfig.pwd_complexity.indexOf('number') != -1) {
						reg += '(?=.*?[0-9])';
						passwordErrorMsg += '数字';
					}
					if (regConfig.pwd_complexity.indexOf('letter') != -1) {
						reg += '(?=.*?[a-z])';
						passwordErrorMsg += '、小写字母';
					}
					if (regConfig.pwd_complexity.indexOf('upper_case') != -1) {
						reg += '(?=.*?[A-Z])';
						passwordErrorMsg += '、大写字母';
					}
					if (regConfig.pwd_complexity.indexOf('symbol') != -1) {
						reg += '(?=.*?[#?!@$%^&*-])';
						passwordErrorMsg += '、特殊字符';
					}
					rule.push({
						name: 'password',
						checkType: 'reg',
						checkRule: reg,
						errorMsg: passwordErrorMsg
					});
				}
				if (this.formData.password != this.formData.rePassword) {
					this.$util.showToast({
						title: '两次密码不一致'
					});
					return false;
				}

				if (this.captcha.id != '') {
					rule.push({
						name: 'captcha_code',
						checkType: 'required',
						errorMsg: '请输入验证码'
					});
				}
				var checkRes = validate.check(data, rule);
				// 验证密码
				// if (checkRes) {
				// 	// 验证手机号
				// 	let reg_tel = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
				// 	if (reg_tel.test(this.formData.account.trim())) {
				// 		console.log('通过')
				// 		return true
				// 	} else {
				// 		uni.showToast({
				// 			title: '请输入正确的手机号'
				// 		})
				// 		return false
				// 	}
				// } else {
				// 	this.$util.showToast({
				// 		title: validate.error
				// 	});
				// 	return false;
				// }
			},
			Getphonecode() {
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
				if (reg_tel.test(this.formData.account.trim())) {
					if (this.dynacodeData.codeText == '获取动态码') {
						this.$refs.phone_Popup.open()
						// 开始倒计时
						this.GetimgCode()
					} else {
						uni.showToast({
							title: this.dynacodeData.codeText,
							icon: 'none'
						})
					}

				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				}

			},
			// 获取图片验证码
			GetimgCode() {
				console.log(54612)
				this.$api.sendRequest({
					url: '/api/captcha/captcha',
					data: {
						captcha_id: ''
					},
					success: res => {
						console.log(res)
						if (res.code >= 0) {
							this.captcha = res.data;
							this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
						}
					}
				});

			},
			/**
			 * 发送手机动态码
			 */
			sendMobileCode() {
				if (this.dynacodeData.seconds != 120) return;
				if (this.dynacodeData.isSend) return;
				if (this.phone_test == '') {
					uni.showToast({
						title: '请输入图示的验证码',
						icon: 'none'
					})
					return
				}
				this.dynacodeData.isSend = true;
				this.$api.sendRequest({
					url: '/api/register/mobileCode',
					data: {
						captcha_id: this.captcha.id,
						captcha_code: this.phone_test,
						mobile: this.formData.account
					},
					success: res => {
						console.log(res)
						this.dynacodeData.isSend = false;
						if (res.code >= 0) {
							this.$refs.phone_Popup.close()
							this.formData.key = res.data.key;
							if (this.dynacodeData.seconds == 120 && this.dynacodeData.timer == null) {
								this.dynacodeData.timer = setInterval(() => {
									this.dynacodeData.seconds--;
									this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取';
								}, 1000);
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: (err) => {
						this.$util.showToast({
							title: 'request:fail'
						});
						this.dynacodeData.isSend = false;
					}
				});
			},

			/**
			 * 去登录
			 */
			toLogin() {
				if (this.back) this.$util.redirectTo('/pages/login/login/login', {
					back: this.back
				});
				else this.$util.redirectTo('/pages/login/login/login');
			}
		},
		watch: {
			'dynacodeData.seconds': {
				handler(newValue, oldValue) {
					if (newValue == 0) {
						clearInterval(this.dynacodeData.timer);
						this.dynacodeData = {
							seconds: 120,
							timer: null,
							codeText: '获取动态码',
							isSend: false
						};
					}
				},
				immediate: true,
				deep: true
			}
		}
	};
</script>

<style lang="scss">
	@import '../public/css/common.scss';

	.phone-floating {
		/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
			border-radius: 10rpx;
		}
		.phone-box {
			width: 400rpx;
			padding: 20rpx;

			.phone-img {
				height: 250rpx;
				width: 400rpx;
				// width: 50rpx;
			}

			.phonecode-box {

				input {
					height: 70rpx;
					background-color: #f8f8f8;
					letter-spacing: 3rpx;
					width: 100%;
					text-align: center;
					font-size: 28rpx;
				}

				.test-btn {
					margin: 0;
					color: white;
					width: 100%;
					border-radius: 4rpx;
					height: 80rpx;
					margin-top: 20rpx;
					background-color: #FF335C;
				}
			}
		}

	}
</style>
